<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/shop" replace>商户管理</el-breadcrumb-item>
      <el-breadcrumb-item>商户修改信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">商户修改信息</div>
      <el-row>
        <el-col :span="3">商户编号</el-col>
        <el-col :span="9">9000728</el-col>
        <el-col :span="3">商户账号</el-col>
        <el-col :span="9">13835330301</el-col>
      </el-row>
      <el-row>
        <el-col :span="3">商家名称</el-col>
        <el-col :span="9">
          <el-input size="mini"></el-input>
        </el-col>
        <el-col :span="3">申请时间</el-col>
        <el-col :span="9">2018-09-12 20:51:28</el-col>
      </el-row>
      <el-row>
        <el-col :span="3">经度</el-col>
        <el-col :span="9">
          <el-input size="mini"></el-input>
        </el-col>
        <el-col :span="3">纬度</el-col>
        <el-col :span="9">
          <el-input size="mini"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">所属区域</el-col>
        <el-col :span="9">
          <el-form size="mini">
            <el-form-item class="width">
              <region @region="onChangeRegion"></region>
            </el-form-item>
            <el-form-item label="地址">
              <el-input></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="3">商户地址</el-col>
        <el-col :span="9">
          <el-input size="mini"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">商户审核状态</el-col>
        <el-col :span="9">
          <el-select v-model="info.status" placeholder="请选择" size="mini">
            <el-option v-for="item in shopReviewOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">商户开关状态</el-col>
        <el-col :span="9">
          <el-select v-model="info.shopStatus" placeholder="请选择" size="mini">
            <el-option v-for="item in shopStatusOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">联系人姓名</el-col>
        <el-col :span="9">
          <el-input size="mini"></el-input>
        </el-col>
        <el-col :span="3">联系人电话</el-col>
        <el-col :span="9">
          <el-input size="mini"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">经营时间</el-col>
        <el-col :span="9">
          <el-time-picker placeholder="任意时间点" size="mini"></el-time-picker>
          -
          <el-time-picker arrow-control placeholder="任意时间点" size="mini"></el-time-picker>
        </el-col>
        <el-col :span="3">优惠</el-col>
        <el-col :span="9">
          <el-form size="mini">
            <el-form-item label="优惠信息"><el-input type="textarea"></el-input></el-form-item>
            <el-form-item label="折扣率"><el-input></el-input></el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">经营范围</el-col>
        <el-col :span="21"><el-input type="textarea" size="mini"></el-input></el-col>
      </el-row>
      <el-row>
        <el-col :span="3">店内联系电话</el-col>
        <el-col :span="21"><el-input size="mini"></el-input></el-col>
      </el-row>
      <el-row>
        <el-col :span="3">当前所属商圈</el-col>
        <el-col :span="9">长治</el-col>
        <el-col :span="3">更新后所属商圈</el-col>
        <el-col :span="9">
          <el-select v-model="info.shopArea" placeholder="请选择" size="mini">
            <el-option v-for="item in shopAreaOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button type="primary" size="mini">确定</el-button>
          <el-button size="mini">取消</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import region from 'components/region'

  export default {
    data () {
      return {
        info: {},
        shopReviewOptions: [],
        shopStatusOptions: [],
        shopAreaOptions: []
      }
    },
    created () {
    },
    methods: {
      onChangeRegion (data) {
        console.log(data)
        // this.searchObject.shopRegion.province = data.value
      },
      onChangeCity (data) {
        this.searchObject.shopRegion.city = data.value
      }
    },
    components: {
      region
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .el-row {
    display: flex;
    .el-col {
      display: flex;
      padding: 15px;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
      .el-form {
        width: 100%;
        .el-form-item {
          margin-right: auto;
          margin-left: auto;
          width: 50%;
          &.width{
            width: 70%;
            text-align: center;
          }
          .el-input{
            width: 70%;
          }
          .el-textarea{
            width: 70%;
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      .el-input{
        width: 35%;
      }
      .el-textarea{
        width: 35%;
      }
    }
  }
</style>
